<template>
  <el-dropdown-item v-bind="$props" :class="['ui-dropdown-item--' + type]" @click.native="handleClick">
    <slot></slot>
  </el-dropdown-item>
</template>
<script>
import DropdownItem from 'element-ui/lib/dropdown-item'

export default {
  name: 'UiDropdownItem',
  props: Object.assign({}, DropdownItem.props, {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'success', 'info', 'danger', 'primary', 'warning', 'custom'].includes(value)
      }
    }
  }),
  components: {
    ElDropdownItem: DropdownItem
  },
  methods: {
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>
<style lang="less">
body .el-dropdown-menu__item{
  &.ui-dropdown-item--custom {
    padding: 0;
  }
  &.ui-dropdown-item--success{
    color: #7ebf4a;
    &:hover {
      color: #7ebf4a;
      background-color: lighten(#7ebf4a, 20%);
    }
  }
  &.ui-dropdown-item--info{
    color: #919399;
    &:hover {
      color: #919399;
      background-color: lighten(#919399, 20%);
    }
  }
  &.ui-dropdown-item--danger{
    color: #F91B22;
    &:hover {
      color: #F91B22;
      background-color: lighten(#F91B22, 44%);
    }
  }
  &.ui-dropdown-item--primary{
    color: #5f9efa;
    &:hover {
      color: #5f9efa;
      background-color: lighten(#5f9efa, 20%);
    }
  }
  &.ui-dropdown-item--warning{
    color: #dba54a;
    &:hover {
      color: #dba54a;
      background-color: lighten(#dba54a, 20%);
    }
  }
}
</style>
